<template>
   <div class="water-box w-full flex-center">
      <div class="water">

      </div>
   </div>
</template>

<script setup lang='ts'>

</script>
<style scoped>
.water-box {
   height: 300px;
}

.water {
  width: 200px;
  height: 200px;
  position: relative;
  animation: action 3s linear infinite alternate;
  border-radius: 59% 41% 63% 37% / 22% 26% 74% 78%;
  box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5),
              10px 20px 20px rgba(0, 0, 0, 0.3),
              15px 15px 30px rgba(0, 0, 0, 0.05),
              inset -10px -10px 15px rgba(255, 255, 255, 0.8)
}
.water::after {
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 40px;
  left: 38%;
  background: #fff;
  border-radius: 50% 50% 63% 37% / 54% 63% 37% 46%;

}

.water::before {
  content: '';
  width: 5px;
  height: 5px;
  position: absolute;
  top: 60px;
  left:28%;
  background: #fff;
  border-radius: 50% 50% 63% 37% / 54% 63% 37% 46%;
}
@keyframes action {
   25% {
    border-radius: 30% 70% 44% 56% / 42% 26% 74% 58%;
   }
   50% {
    border-radius: 30% 70% 31% 79% / 57% 26% 74% 43%;
   }
   100% {
    border-radius: 30% 70% 51% 49% / 33% 40% 60% 67%;
   }
}
</style>
